import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { LoginForm, ProFormText } from '@ant-design/pro-components';
import { Col, Form, message, Row, Tabs, theme } from 'antd';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { request } from 'umi';

const LoginPage = () => {
  const email = localStorage.getItem("email") || ""
  const { token } = theme.useToken();
  const navigate = useNavigate();
  const [captcha, setCaptcha] = useState("")
  const [form] = Form.useForm()

  const handleSubmit = async (values: any) => {
    let res = await request('/login', {
      method: 'POST',
      data: {
        email: values.email,
        password: values.password,
        captcha:values.captcha
      },
    });
    if (res.code === 200) {
      localStorage.setItem('user', JSON.stringify(res.data));
      localStorage.setItem("email", res.data.email)
      message.success('登录成功');
      navigate('/');
    }
  };
  //获取验证图片
  const getCaptcha = async () => {
    let res = await request('/getCaptcha', {
      method: 'GET',

    });
    console.log(res)

    if (res.code === 200) {
      setCaptcha(res.data)
    }


  }

  useEffect(() => {
    getCaptcha()
  }, [])

  return (
    <div
      style={{
        backgroundColor: token.colorBgContainer,
        height: '100vh',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundImage: `url(/login_bg.svg)`,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center 110px',
        backgroundSize: '100%',
      }}
    >
      <div
        style={{
          width: '392px',
          margin: '0 auto',
          boxShadow:
            '0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09) ',
        }}
      >
        <LoginForm
          form={form}
          title="达美"
          // subTitle="欢迎使用管理系统"
          onFinish={handleSubmit}
          logo={<img alt="logo" src="/logo.svg" />}
        >
          <Tabs
            centered
            items={[
              {
                key: 'account',
                label: '账户密码登录',
              },
            ]}
          />
          <ProFormText
            name="email"
            fieldProps={{
              size: 'large',
              prefix: <UserOutlined />,
            }}
            initialValue={email}
            placeholder="邮箱"
            rules={[
              {
                required: true,
                message: '请输入邮箱!',
              },
            ]}
          />
          <ProFormText.Password
            name="password"
            fieldProps={{
              size: 'large',
              prefix: <LockOutlined />,
            }}
            // initialValue="111111"
            placeholder="密码"
            rules={[
              {
                required: true,
                message: '请输入密码！',
              },
            ]}
          />
          <Row>
            <Col span="12">
              <ProFormText
                
                name="captcha"
                fieldProps={{
                  size: 'large',

                }}
                // initialValue="111111"
                placeholder="验证码"
                rules={[
                  {
                    required: true,
                    message: '请输入验证码！',
                  },
                ]}
              />

            </Col>
            <Col span="12">
                <div style={{cursor:"pointer"}} onClick={getCaptcha} dangerouslySetInnerHTML={{__html:captcha}}></div>
            </Col>

          </Row>

          <div
            style={{
              marginBottom: 24,
              display: 'flex',
              justifyContent: 'space-between',
            }}
          >
            <a>忘记密码</a>
            <a onClick={() => navigate('/register')}>注册账户</a>
          </div>
        </LoginForm>
      </div>
    </div>
  );
};

export default LoginPage;
